<template>
    <div>
        <div class="body">
            <div class="title">
            贫困户
            <span>您现在所在的位置 ：贫困户</span>
            </div>
            <div class="search">
                <el-button type="primary" style="mini" @click="fupinList()">搜索</el-button>
                <input type="text" v-model="name" placeholder="请输入贫困户姓名">
            </div>
            <ul>
                <li v-for="(item,index) in fupin_list" :key="index"
                @click="$router.push('/pinkunInfo/'+item.id)"
                >
                    <img :src="item.cover" alt=""> 
                    <span>{{item.name}}</span>
                </li>
            </ul>
            <div class="fenye">
                <el-pagination
                :total="total"   
                :page-size="pageSize"
                layout="prev,pager,next"
                @current-change="change">
                <!--  @current-change="change" 
                        当前页发生改变时触发event事件change
                -->
                </el-pagination>
            </div>
        </div>
    </div>  
</template>

<script>
export default {
    data (){
        return{
            fupin_list:[],
            pageNum:1,
            pageSize:4,
            total:0,
            name:''
        }
    },
    methods:{
        async fupinList(pageNum,pageSize){
            let { data : res } =  await this.$axios.get("/poor/getlist",{
                params:{
                    pageNum,
                    pageSize,
                    name:this.name
                }
            })
            console.log(res);
            this.fupin_list = res.data.list
            this.total = res.data.total
        },
        change(e){
            // console.log(e);
            this.pageNum = e
            this.fupinList(this.pageNum,this.pageSize)
        }
    },
    created(){
        this.fupinList(this.pageNum,this.pageSize)
    }
}
</script>

<style  scoped>
.body{
    border: 1px solid #433;
}
.title{
    width: 70%;
    height: 50px;
    line-height: 50px;
    border-left: 5px #666 solid;
        margin: 10px auto;
}
.search{
    width: 80%;
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 0 auto;

}
input{
    margin-right: 10px;
    height: 35px;
}
ul{

    width: 80%;
    margin: 0 auto ;
    display: flex;
    flex-direction: row;  
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    
}
li{
    width: 48%;
    height: 100px;
    margin-top: 30px;
    display: flex;
    align-items: center;   
        box-shadow: 10px 10px 5px #888888;
        border: 1px solid  #666;
        border-radius: 10px;
}
li span{

    color:rgb(0,122,204);
    margin: 0 auto;
    font-size: 20px;
}
li img{
    width: 100px;
    height: 100px;
    border-radius: 10px;
}
.fenye{
    margin-left: 45%;
    margin-top: 30px;
}
</style>